<script lang="ts" setup>
import { computed, ref } from 'vue'
import LineArtists from '../common/LineArtists.vue'
import { useSongStoreHook } from '@/store/modules/song'
import { formatSecond } from '@/utils/format'

import { ContextMenu } from '@/hook/domHandler'

const songStore = useSongStoreHook()

const volume = computed({
  get() {
    return songStore.volume
  },
  set(val: number) {
    songStore.volume = val
  }
})

const songList = computed(() => songStore.songList)
const currentSongId = computed(() => songStore.currentSongId)

const changeSong = (id: number) => {
  songStore.toggleSongId(id)
  songStore.getSongDetail()
}

const showPlaylist = ref(false)
const showHandler = () => {
  showPlaylist.value = !showPlaylist.value
}

const clear = () => {
  songStore.clearSonglist()
}
const listRef = ref()
const showContextmenu = (event: any, song: any) => {
  console.log(event, song)
  ContextMenu({
    el: listRef.value,
    menuList: [
      {
        label: '播放',
        border: true,
        icon: 'icon-icon_zhuanjiyinpinbofang',
        fn: () => {
          changeSong(song.id)
        }
      },
      {
        label: `专辑: ${song.al.name}`,
        icon: 'icon-zhuanji1'
      },
      {
        label: `歌手: ${song.ar[0].name}`,
        icon: 'icon-flyme_icon-'
      },
      {
        label: `收藏到歌单`,
        icon: 'icon-wenjianjia1',
        border: true,
        children: [
          {
            label: '我喜欢的音乐',
            icon: 'icon-yinleliebiao'
          }
        ]
      },
      {
        label: '从列表中删除',
        icon: 'icon-delete',
        fn: () => {
          songStore.deleteSong(song)
        }
      }
    ],
    menuWidth: 240,
    pos: {
      x: event.pageX,
      y: event.pageY
    }
  })
}
</script>

<template>
  <div class="detail_container">
    <el-popover placement="top" trigger="hover" popper-class="volume_popover">
      <template #reference>
        <i class="icon-yinlianglabashengyin-xianxing"></i>
      </template>
      <el-slider v-model="volume" :step="10" vertical height="200px" />
    </el-popover>

    <el-popover
      placement="top"
      :width="440"
      trigger="click"
      popper-class="playlist_popover"
      :visible="showPlaylist"
    >
      <template #reference>
        <i class="icon-zhankai" @click="showHandler"></i>
      </template>
      <div class="playlist_container">
        <div class="playlist_sim">
          <p class="playlist_sim__title">当前播放</p>
          <p class="playlist_sim__handle">
            <span class="playlist_length">总 {{ songList.length }} 首</span>
            <span>
              <i class="icon-tianjiawenjianjia"> 收藏全部 </i>
              <i style="color: #698caa; cursor: pointer" @click="clear"
                >清空列表</i
              >
            </span>
          </p>
        </div>
        <div class="playlist" ref="listRef">
          <template v-for="item in songList" :key="item.id">
            <div
              class="playlist_item"
              :class="{ current: currentSongId === item.id }"
              @dblclick="changeSong(item.id)"
              @contextmenu.prevent.stop="showContextmenu($event, item)"
            >
              <i
                class="playlist_icon"
                :class="{ 'icon-zhengzaibofang': currentSongId === item.id }"
              />
              <span class="playlist_item__info">
                <span class="ellipsis song_name mr-1"
                  ><i>{{ item.name }}</i>
                  <i style="color: var(--music-link-color)" v-if="item?.tns">
                    ({{ item?.tns[0] }})
                  </i></span
                >
                <LineArtists width="140px" :artists="item.ar" />
                <span class="ellipsis song_time">{{
                  formatSecond(item?.dt / 1000)
                }}</span>
              </span>
            </div>
          </template>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
.detail_container {
  width: 30%;
  min-width: 200px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
[class^='icon'] {
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
}
:deep(.el-slider__bar) {
  background-color: var(--music-base-color);
}
:deep(.el-slider__button) {
  border: none;
  background-color: var(--music-base-color);
}

.playlist_container {
  width: 100%;
  height: auto;
}

.playlist_sim {
  overflow: hidden;
  margin: 10px 10px 0 25px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--music-color-3);

  &__title {
    font-size: 20px;
    font-weight: bold;
    line-height: 2;
  }
  &__handle {
    font-size: 14px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
  }
  .playlist_length {
    color: var(--music-color-7);
  }
  .icon-tianjiawenjianjia {
    font-size: 14px;
    &::before {
      font-size: 16px;
      color: var(--music-color-7);
    }
  }
}
.playlist_item.current {
  color: var(--music-base-color);
}

.playlist {
  height: 74vh;
  min-height: 620px;
  overflow: auto;

  &_item {
    height: 36px;
    line-height: 36px;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    padding-right: 10px;
    display: flex;
    .playlist_icon {
      width: 25px;
      font-size: 14px;
      color: var(--music-base-color);
      padding: 0;
      margin: 0;
      line-height: 36px;
      text-align: center;
    }
    .song_name {
      flex: 1;
    }
    .song_artist {
      width: 140px;
      margin-left: 10px;
    }
    .song_time {
      width: 40px;
      color: var(--music-link-color);
    }
  }
  &_item__name {
    margin-left: 25px;
  }

  &_item:nth-child(2n) {
    background-color: rgba(139, 139, 139, 0.05);
  }

  &_item:hover {
    background-color: rgba(139, 139, 139, 0.07);
  }

  &_item__info {
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }
}
</style>

<style>
.volume_popover {
  width: auto !important;
  min-width: 0 !important;
}
.playlist_popover {
  padding: 0 !important;
  background: var(--music-main-color) !important;
}
</style>
